<template>
    <div class="container">
        <!-- <Navbar bgColor="bg-gradual-blue" title="كىرىش ئېغىزى" /> -->
        <div class="wrapper">
            <div class="btn">
                <button @click="getUserInfo" open-type="getUserInfo">كىرىش</button>
            </div>
        </div>
        <i-toast id="toast" />
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import Navbar from "@/components/Navbar.vue";
const qcloud = require("wafer2-client-sdk");
import { config } from "@/utils/config";
import { $Toast, Base64, _decrypt } from "@/utils";
export default {
    components: {
        Navbar
    },
    methods: {
        ...mapActions([
            "increment",
            "decrement",
            "incrementIfOdd",
            "incrementAsync"
        ]),
        ...mapGetters(["evenOrOdd", "clientRect", "customBar"]),
        getUserInfo() {
            qcloud.setLoginUrl(config.loginUrl);
            try {
                wx.showLoading();
                qcloud.login({
                    success: res => {
                        this.setUserInfo(res);
                         $Toast({
                                content: "مۇۋەپپەقىيەتلىك كىردىڭىز",
                                icon: "success",
                                duration: 1000,
                                mask: false
                        });
                        setTimeout(() => {
                            $Toast.hide();
                        }, 1000);
                    },
                    fail: err => {
                        $Toast({
                            content: "مەغلۇپ بولدى",
                            icon: "warning",
                            duration: 1000,
                            mask: false
                        });
                        setTimeout(() => {
                            $Toast.hide();
                        }, 1000);
                        wx.hideLoading();
                    }
                });
            } catch (error) {
                wx.hideLoading();
            }
        },
        setUserInfo(res) {
            try {
                let userId = this.$http
                    .get("/mpSetUser", {
                        id: Base64.encode(res.openId)
                    })
                    .then(list => {
                        let userInfo = { ...res, uid: list.uid };
                        wx.hideLoading();
                        this.$store.commit("SET_USERINFO", userInfo);
                        wx.setStorageSync("userInfo", userInfo);
                        this.setVipInfo(list.uid);
                        this.checkShare(list.uid);
                    });
            } catch (error) {
                $Toast({
                    content: "مەغلۇپ بولدى",
                    icon: "warning",
                    duration: 1000,
                    mask: false
                });
                wx.hideLoading();
            }
        },
        async checkShare(uid) {
             wx.hideLoading();
            if (this.$store.state.sharerUserId) {
                try {
                    await this.$http.get("/mpSetShare", {
                        sharerId: this.$store.state.sharerUserId,
                        receiverId: uid
                    });
                } catch (error) {}
            }
            $Toast({
                content: "مۇۋەپپەقىيەتلىك كىردىڭىز",
                icon: "success",
                duration: 1000,
                mask: false
            });
            setTimeout(() => {
                wx.switchTab({ url: "/pages/Home/Home" });
                $Toast.hide();
            }, 1000);
        },
        setVipInfo(uid) {
            this.$http.get("/mpGetUserStatus", { uid }).then(res => {
                if (res.code == "001") {
                    let infoStr = _decrypt(res.data, "yusupturak");
                    infoStr = Base64.decode(infoStr);
                    let info = JSON.parse(infoStr);
                    // 判断后端是否传了isVip字段
                    if (typeof info == "object" && info.isVip) {
                        this.$store.commit("SET_USER", info);
                    } else {
                        let now = Date.now();
                        if (
                            info.startTime &&
                            info.startTime < now &&
                            info.endTime > now
                        ) {
                            info.isVip = 1;
                            {
                                this.$store.commit("SET_USER", info);
                            }
                        } else {
                            this.$store.commit("SET_USER", info);
                        }
                    }
                }
            });
        }
    },
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    }
};
</script>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    display: flex;
    justify-content: center;
    align-items: center;
    .wrapper {
        width: 500rpx;
        height: 400rpx;
        border-radius: 40rpx;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            button {
                box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.15);
                width: 250rpx;
                height: 250rpx;
                border-radius: 50%;
                background-color: #00b9bb;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-family: "ALKATIP UI";
                opacity: 1;
                font-size: 44rpx;
                animation: btn-move 3s linear 0s infinite alternate;
                transition: all 0.5s linear;
                &:active,
                &:focus {
                    font-size: 50rpx;
                    width: 300rpx;
                    height: 300rpx;
                }
            }
        }
    }
}
@keyframes btn-move {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
        box-shadow: 0 10rpx 15rpx 5rpx rgba(0, 0, 0, 0.15);
    }
    50% {
        transform: rotate(0deg);
    }
    55% {
        transform: rotate(0deg);
        box-shadow: 10rpx 0 15rpx 5rpx rgba(0, 0, 0, 0.15);
    }
    70% {
        transform: rotate(0deg);
        background: #1ec7e6;
        box-shadow: 0 0 25rpx 5rpx rgba(0, 0, 0, 0.15);
    }
    100% {
        transform: rotate(-360deg);
    }
}
</style>